<template>
  <div class="progress" :style="`height:${height ? height : '100%'}`">
    <div
      v-for="(item, index) in showData"
      :key="index"
      class="show-item"
      :class="{
        active: item.active,
        first: index === 0,
        second: index === 1,
        third: index === 2,
      }"
      :style="`width:${widthLine ? widthLine : '470px'}`"
    >
      <div class="title cn-regular-13 text-2-5 ellipsis-1">{{ item.name }}</div>
      <el-tooltip
        :show-arrow="false"
        effect="dark"
        placement="left"
        :content="item.name"
      >
        <div class="bar">
          <!-- :style="`width: ${
            widthLine ? widthLine.split('px')[0] - 70 + 'px' : '350px'
          }`" -->
          <div class="progress-bar" :style="`width:${item.percent}%`"></div>
        </div>
      </el-tooltip>
      <div v-decimalFormat.1="item.value" class="value-wrapper"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { formatPercent } from '@/utils';
/**
 *@progress
 */
defineOptions({ name: 'KProgress' });
// props
/**
 * progressData:展示数据
 * height:高度，不传值默认100%
 */
interface Props {
  progressData: any[];
  height?: string;
  widthLine?: any;
}
const props = defineProps<Props>();

const showData = ref<any[]>([]);

watch(
  () => props.progressData,
  (newVal) => {
    if (newVal.length > 0) {
      showData.value = newVal
        .sort((a: any, b: any) => b.value - a.value)
        .slice(0, 10);
      showData.value[0].active = true;
      const max = showData.value[0].value;

      showData.value.forEach((item: any) => {
        item.percent = formatPercent(item.value / max);
      });
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.progress {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .show-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 24px;

    .title {
      flex-shrink: 0;
      width: 54px;
      margin-right: 16px;
    }

    .bar {
      flex: 1;
      height: 8px;
      background-color: var(--brand-1);
      border-radius: 2px;

      .progress-bar {
        height: 8px;
        background-color: var(--brand-6);
        border-radius: 2px;
      }
    }

    .value-wrapper {
      margin-left: 12px;

      :deep(.decimal) {
        .number,
        .unit {
          font-family: number, sans-serif;
          font-size: 13px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px;
          color: var(--text-2-5);
        }

        .unit {
          font-family: 'PingFang SC', sans-serif;
          font-size: 12px;
          line-height: 18px;
        }
      }
    }

    &.first {
      .progress-bar {
        background-color: #ff5e65;
      }

      .value-wrapper {
        :deep(.decimal) {
          .number,
          .unit {
            font-weight: 500;
            color: var(--text-2-7);
          }
        }
      }
    }

    &.second {
      .progress-bar {
        background-color: #ff8732;
      }
    }

    &.third {
      .progress-bar {
        background-color: #ffb243;
      }
    }
  }
}
</style>
